@extends('layouts.default')

@section('title', $products->title)

@section('content')
    <header>
        <div class=container>
            <img class=img-responsive src="{{ asset($products->big_image_url) }}"></div>
    </header>
    <div class="container margin-top30">
        <div class=row>
            <div class=col-md-3>
                <div class="list-group text-center">
                    <div class="list-group-item list-group-item-heading">
                        <h4>Product Finder</h4>
                    </div>
                    @foreach($categories as $category)
                        <a href="/product-finder/{{ $category->slug }}" {!! Request::is('product-finder/'.$category->slug) ? 'class="list-group-item active"' : 'class="list-group-item"' !!}>{{$category->title}}</a>
                    @endforeach
                </div>
            </div>
            <div class=col-md-9>
                @foreach(array_chunk($products->products->all(), 4) as $products_array)
                    <div class="row">
                        @foreach($products_array as $product)
                            <div class=col-md-3>
                                <a class=product-item href=#>
                                    <div class=thumbnail>
                                        <img src={{asset($product->image_url)}} alt={{$product->title}}>
                                        <div class="caption text-center">
                                            <p>{{$product->title}}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@stop